<template>
	<div class="home_box">
		<card title="快捷入口">
			<template #topCenter></template>
			<template #topRight>
				<div style="cursor: pointer">
					<div v-if="entranType" @click="chengUp">入口设置</div>
					<div v-else @click="save">完成</div>
				</div>
			</template>
			<div class="entrance">
				<!-- 显示 -->
				<div class="showItem" v-if="entranType">
					<div class="ent_item" v-for="(item, index) in myEntrance" :key="index">
						<div v-if="index < 6" @click="toPage">
							<div class="img"></div>
							<div class="text">{{ item.title }}</div>
						</div>
					</div>
					<div class="sy" v-if="myEntrance.length > 6">...</div>
				</div>
				<!-- 添加删除 -->
				<div class="updataItem" v-else>
					<div class="ent_item" v-for="(item, index) in updataEntrance" :key="index">
						<div class="box_item">
							<el-icon class="icon" @click="delItem(index)"><CircleClose /></el-icon>
							<div class="img"></div>
							<div class="text">{{ item.title }}</div>
						</div>
					</div>
					<el-icon class="ent_item_add"><Plus /></el-icon>
				</div>
			</div>
		</card>
		<card title="待办管理">
			<template #topCenter>待办列表</template>
			<template #topRight>
				<div>查看更多>></div>
			</template>
			<template #contentLeft>
				<div class="content_left">
					<div class="item">
						<div class="text">待办数量</div>
						<div class="data">xxxx条</div>
					</div>
					<div class="item">
						<div class="text">已办数量</div>
						<div class="data">xxxx条</div>
					</div>
				</div>
			</template>
			<template #contentRight>
				<div class="content_right">
					<div class="item" v-for="(item, index) in itemList" :key="index">
						<span class="top_le">{{ item.title }}</span
						><span class="top_rig">{{ item.lei }}</span>
						<div class="time">{{ item.time }}</div>
					</div>
				</div>
			</template>
		</card>
	</div>
</template>

<script lang="ts" setup>
import card from './components/Card.vue';
import { useRouter } from 'vue-router';
import { CircleClose } from '@element-plus/icons-vue';
const router = useRouter();
import { toRefs, defineProps, reactive, ref, onMounted } from 'vue';

const entranType = ref(true);
//修改
const chengUp = () => {
	entranType.value = !entranType.value;
	updataEntrance.value = myEntrance.value;
};
//删除
const delItem = (index: number) => {
	updataEntrance.value.splice(index, 1);
};
//保存
const save = () => {};
const myEntrance: any = ref([
	{
		title: '我的待办事项',
		url: '',
		icon: '',
	},
	{
		title: '我的待办事项',
		url: '',
		icon: '',
	},
	{
		title: '我的待办事项',
		url: '',
		icon: '',
	},
	{
		title: '我的待办事项',
		url: '',
		icon: '',
	},
	{
		title: '我的待办事项',
		url: '',
		icon: '',
	},
	{
		title: '我的待办事项',
		url: '',
		icon: '',
	},
	{
		title: '我的待办事项',
		url: '',
		icon: '',
	},
]);
const updataEntrance: any = ref([]);
const toPage = () => {
	// router.push({
	// 	path: '',
	// 	query: {
	// 	},
	// });
};

const itemList: any = ref([
	{
		title: '哈不断将案件那就扩大',
		time: '2024-5-5',
		lei: '类别',
	},
	{
		title: '哈不断将案件那就扩大',
		time: '2024-5-5',
		lei: '类别',
	},
	{
		title: '哈不断将案件那就扩大',
		time: '2024-5-5',
		lei: '类别',
	},
	{
		title: '哈不断将案件那就扩大',
		time: '2024-5-5',
		lei: '类别',
	},
	{
		title: '哈不断将案件那就扩大',
		time: '2024-5-5',
		lei: '类别',
	},
	{
		title: '哈不断将案件那就扩大',
		time: '2024-5-5',
		lei: '类别',
	},
	{
		title: '哈不断将案件那就扩大',
		time: '2024-5-5',
		lei: '类别',
	},
	{
		title: '哈不断将案件那就扩大',
		time: '2024-5-5',
		lei: '类别',
	},
	{
		title: '哈不断将案件那就扩大',
		time: '2024-5-5',
		lei: '类别',
	},
	{
		title: '哈不断将案件那就扩大',
		time: '2024-5-5',
		lei: '类别',
	},
	{
		title: '哈不断将案件那就扩大',
		time: '2024-5-5',
		lei: '类别',
	},
	{
		title: '哈不断将案件那就扩大',
		time: '2024-5-5',
		lei: '类别',
	},
	{
		title: '哈不断将案件那就扩大',
		time: '2024-5-5',
		lei: '类别',
	},
]);
</script>

<style lang="scss" scoped>
.home_box {
	padding: 0px 20px;
	.entrance {
		.showItem {
			display: flex;
			flex-wrap: wrap;
			.ent_item {
				cursor: pointer;
				margin-right: 20px;
				.img {
					width: 80px;
					height: 80px;
					border: 1px solid black;
					margin: auto;
				}
				.text {
					font-size: 20px;
					margin-top: 10px;
				}
			}
			.sy {
				font-size: 30px;
				margin-top: 10px;
			}
		}
		.updataItem {
			display: flex;
			flex-wrap: wrap;
			.ent_item {
				margin-right: 20px;
				.img {
					width: 80px;
					height: 80px;
					border: 1px solid black;
					margin: auto;
				}
				.text {
					font-size: 20px;
					margin-top: 10px;
				}
				.box_item {
					position: relative;
					.icon {
						width: 30px;
						height: 30px;
						position: absolute;
						top: -15px;
						right: 5px;
						background-color: white;
						border: 1px solid #d7d7d7;
						border-radius: 50%;
						cursor: pointer;
					}
				}
			}
			.ent_item_add {
				cursor: pointer;
				width: 80px;
				height: 80px;
				border: 1px solid #d7d7d7;
				border-radius: 10px;
			}
		}
	}

	.content_left {
		.item {
			padding: 30px 150px;
			background-color: #f2f2f2;
			border-radius: 20px;
			box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-bottom: 20px;
			.text {
				font-size: 20px;
				font-weight: bolder;
			}
			.data {
				font-size: 25px;
				font-weight: bolder;
				color: #4279ec;
				margin-top: 10px;
			}
		}
	}

	.content_right {
		width: 100%;
		height: 350px;
		overflow: auto;
		.item {
			padding: 20px 20px;
			border-top: 1px solid#EBEBEB;
			border-bottom: 1px solid#EBEBEB;
			.top_le {
				font-size: 18px;
			}
			.top_rig {
				margin-left: 15px;
				font-size: 16px;
				border: 1px solid #96d4fe;
				background-color: #e7f7ff;
				border-radius: 5px;
				color: #4d99fd;
				padding: 2px 5px;
			}
			.time {
				font-size: 15px;
				margin-top: 8px;
				color: #aaaaaa;
			}
		}
	}
}
</style>
